import { Button } from 'antd';
import React, { useState } from 'react';
import styled from 'styled-components';
import history from './history';
import { useNavigate } from 'react-router-dom';

const StyledCheckboxContainer = styled.div`
  display: flex;
  flex-direction: column;
`;
const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
`;
const StyledButton = styled(Button)`
  width: 300px;
`;
 
const MeetingPage: React.FC = () => {
  const [meetingNumber, setMeetingNumber] = useState('1');
  const [name, setName] = useState('');
  const [checkboxes, setCheckboxes] = useState([
    { name: '入会开启摄像头', checked: false ,value: '1'},
    { name: '入会开启马克风', checked: false ,value: '2'},
    // { name: 'checkbox3', checked: false },
    // { name: 'checkbox4', checked: false },
  ]);
  const handleCheckboxChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
    
    const newCheckboxes = [...checkboxes];
    newCheckboxes[index].checked = event.target.checked;
    setCheckboxes(newCheckboxes);
  };
  const navigate = useNavigate();
  return (
    <StyledContainer>
      <h1>加入会议</h1>
      <label>
        会议号:
        </label>
        <select value={meetingNumber} onChange={e => {
          debugger
          setMeetingNumber(e.target.value)
          
          }}>
          <option defaultChecked value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          {/* 添加更多选项 */}
        </select>
      
      <label>
        您的名称:
       
      </label>
      <input type="text" defaultValue={"peter"} value={name} onChange={e => setName(e.target.value)} />
      <label>
        会议设置:
        </label>
        <StyledCheckboxContainer>
        {checkboxes.map((checkbox, index) => (
          <div key={checkbox.name}>
            <input
              type="checkbox"
              checked={checkbox.checked}
              onChange={handleCheckboxChange(index)}
            />
          <label 
          // onClick={() => handleCheckboxChange(index)}
          >{checkbox.name}</label>
          </div>
        ))}
        </StyledCheckboxContainer>
        <StyledButton onClick={()=>{
          //  history.push('/AppContainer');
          debugger
          let isPhoneOpen=false;
          let isVideoOpen=false;
          const newCheckboxes = [...checkboxes];
           console.log(newCheckboxes)
           newCheckboxes.forEach((checkbox) => {
            switch (checkbox.value) {
              case '1':
                if(checkbox.checked){
                  isVideoOpen = true;
                } else {
                  isVideoOpen = false;
                }
                
                break;
              case '2':
                if(checkbox.checked){
                  isPhoneOpen = true;
                } else {
                  isPhoneOpen = false;
                }
                break;
              default:
                break;
            }
          });
          
          navigate('/AppContainer/'+meetingNumber+'/'+name+'/'+isVideoOpen+'/'+isPhoneOpen);

        }}>加入会议</StyledButton>
      
    </StyledContainer>
  );
};

export default MeetingPage;